Flutter Fundamentals are the foundation for understanding how Flutter applications are created, structured, displayed, and managed. Before moving into advanced topics such as navigation, APIs, state management, animations, databases, and app architecture, it is important to understand the core concepts of Flutter and Dart.
Flutter uses a widget-based approach to build user interfaces. Almost every visible or structural part of a Flutter application is represented using widgets, and widgets are composed together to create complete application screens. Flutter's official learning pathway also introduces Dart fundamentals before moving into Flutter UI, widgets, layouts, user input, state, and animations.
For professional Flutter training, visit: JustAcademy Flutter Training
To register for a course demo: Register for Flutter Course Demo
Flutter is a UI framework used to build applications for multiple platforms from a shared codebase. Flutter applications are primarily written using the Dart programming language.
Flutter provides a large collection of widgets for building interfaces, handling user interaction, arranging layouts, styling content, displaying images, creating navigation structures, and implementing application behavior.
Flutter and Dart are closely connected. Flutter provides the UI framework and development tools, while Dart is the programming language used to write Flutter application code.
Dart
↓
Programming Language
↓
Flutter Framework
↓
Widgets + Layout + Interaction
↓
Application
↓
Mobile / Web / Desktopvoid main() {
String name = 'Rahul';
print('Hello $name');
}The same Dart language is used inside Flutter applications to define variables, functions, classes, widgets, application logic, and state.
Flutter applications are written in Dart, so understanding basic Dart concepts makes Flutter development easier.
The most important concept in Flutter is the widget. Widgets describe parts of the user interface and are composed together to form an application.
A screen can contain multiple widgets, and each widget can contain other widgets.
MaterialApp
↓
Scaffold
↓
Column
├── Text
├── Image
├── SizedBox
└── ElevatedButtonThis hierarchy is called the widget tree.
A widget is a fundamental building block of a Flutter user interface. Flutter provides widgets for displaying content, arranging content, receiving input, styling elements, and managing application structure.
Text - displays text.Image - displays images.Icon - displays icons.Container - provides a customizable rectangular area.Row - arranges children horizontally.Column - arranges children vertically.Stack - places widgets on top of each other.Center - centers its child.Padding - adds space around a child.Scaffold - provides a common Material screen structure.MaterialApp - provides application-level Material configuration.Flutter's widget catalog includes visual, structural, interactive, layout, styling, scrolling, text, and other categories of widgets.
Flutter encourages developers to build complex interfaces by combining smaller widgets. Instead of creating one extremely large UI component, developers can divide the interface into smaller reusable widgets.
Scaffold(
appBar: AppBar(
title: const Text('Student App'),
),
body: Center(
child: Column(
children: [
const Text('Student Profile'),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: const Text('View Profile'),
),
],
),
),
)
In this example, Scaffold, AppBar, Text, Center,
Column, SizedBox, and ElevatedButton are composed together.
The main() function is the entry point of a Dart application.
void main() {
print('Application started');
}
In Flutter, the main() function commonly calls runApp().
void main() {
runApp(const MyApp());
}
The runApp() function takes a widget and makes it the root of the Flutter widget tree.
void main() {
runApp(
const Text('Hello Flutter'),
);
}
In a complete application, developers commonly use a root widget such as MaterialApp or
CupertinoApp.
void main() {
runApp(
const MaterialApp(
home: HomePage(),
),
);
}
A StatelessWidget is appropriate when the widget does not manage mutable state internally.
Its UI is determined by its configuration and the values supplied to it.
import 'package:flutter/material.dart';
class WelcomeText extends StatelessWidget {
const WelcomeText({super.key});
@override
Widget build(BuildContext context) {
return const Text(
'Welcome to Flutter',
);
}
}void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(
child: WelcomeText(),
),
),
),
);
}
A StatefulWidget is used when part of the UI needs to respond to changing state.
Examples include counters, checkboxes, switches, form fields, loading indicators, and interactive screens.
class CounterScreen extends StatefulWidget {
const CounterScreen({super.key});
@override
State createState() => _CounterScreenState();
}
class _CounterScreenState extends State {
int count = 0;
void increaseCount() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
'Count: $count',
style: const TextStyle(fontSize: 30),
),
),
floatingActionButton: FloatingActionButton(
onPressed: increaseCount,
child: const Icon(Icons.add),
),
);
}
}
setState() informs Flutter that the state has changed and the affected widget needs to rebuild.
Widgets generally implement a build() method that returns another widget describing their UI.
@override
Widget build(BuildContext context) {
return const Text(
'Hello Flutter',
);
}
The BuildContext provides information about the location of the widget within the widget tree and
can be used to access inherited information such as themes and navigation-related objects.
The build() method should primarily describe the UI. It should be fast and should avoid performing
unrelated side effects.
BuildContext represents the location of a widget within the widget tree.
It is commonly used when accessing information from surrounding widgets.
Text(
'Hello',
style: Theme.of(context).textTheme.headlineMedium,
)
Here, context is used to access the application's current theme.
MaterialApp is commonly used as the root of applications that follow Material Design.
It provides application-level configuration such as themes, navigation support, localization-related configuration,
and other Material features.
MaterialApp(
title: 'My Flutter App',
home: HomePage(),
)| Property | Purpose |
|---|---|
title |
Provides the application title. |
home |
Specifies the initial screen. |
theme |
Defines application-wide visual styling. |
routes |
Defines named routes. |
debugShowCheckedModeBanner |
Controls the debug banner displayed in debug mode. |
Scaffold provides a standard Material Design visual structure for a screen.
Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: const Center(
child: Text('Welcome'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
)appBarbodyfloatingActionButtondrawerbottomNavigationBarbackgroundColorThe Text widget displays text.
const Text(
'Hello Flutter',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
)The Icon widget displays an icon.
const Icon(
Icons.home,
size: 40,
)An image can be loaded from application assets or other supported image sources.
Image.asset(
'assets/images/logo.png',
)ElevatedButton(
onPressed: () {
print('Button clicked');
},
child: const Text('Click Me'),
)
SizedBox is useful for creating fixed dimensions or spacing.
const SizedBox(
height: 20,
)
Container is a commonly used convenience widget for controlling size, alignment, padding, margin,
decoration, and other visual properties.
Container(
width: 200,
height: 100,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
child: const Center(
child: Text(
'Flutter',
style: TextStyle(
color: Colors.white,
),
),
),
)
BoxDecoration is used to decorate boxes with properties such as colors, borders, gradients,
rounded corners, and shadows.
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 4),
),
],
),
)colorborderborderRadiusboxShadowgradientshapeFlutter layouts are created by composing widgets. Layout widgets control how child widgets are arranged, aligned, constrained, and sized.
A useful way to remember Flutter's basic layout model is:
Constraints go down
Sizes go up
Parents set positionsRowColumnStackExpandedFlexibleCenterAlignPaddingContainerSizedBoxListViewGridView
Row arranges its children horizontally.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.person),
const SizedBox(width: 10),
const Text('John'),
],
)mainAxisAlignmentcrossAxisAlignmentmainAxisSizechildren
Column arranges its children vertically.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Name'),
const Text('Email'),
const Text('Course'),
],
)
Stack allows widgets to be placed on top of one another.
Stack(
children: [
Container(
width: 200,
height: 200,
),
const Positioned(
bottom: 10,
left: 10,
child: Text('Profile'),
),
],
)
Positioned can be used to control the position of a child within a Stack.
Expanded allows a child of a Row, Column, or another Flex-based layout to
occupy available space.
Row(
children: [
Expanded(
child: Container(
height: 100,
),
),
Expanded(
child: Container(
height: 100,
),
),
],
)By default, both children share the available horizontal space equally.
Padding creates space inside the boundary of a widget around its child.
Padding(
padding: const EdgeInsets.all(20),
child: const Text('Hello'),
)
Margin is commonly achieved through widgets such as Container using its margin property.
Container(
margin: const EdgeInsets.all(20),
child: const Text('Hello'),
)
Flutter provides TextStyle for controlling the appearance of text.
const Text(
'Flutter Fundamentals',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
letterSpacing: 1,
),
)fontSizefontWeightfontStyleletterSpacingwordSpacingdecorationheightFlutter provides predefined colors and allows developers to define custom colors.
Container(
color: Colors.blue,
)Colors can also be used in text and icons:
const Text(
'Flutter',
style: TextStyle(
color: Colors.blue,
),
)Flutter provides widgets for receiving input from users, including buttons, text fields, switches, checkboxes, radio buttons, sliders, and gesture detectors.
TextField(
decoration: InputDecoration(
labelText: 'Enter your name',
border: OutlineInputBorder(),
),
)ElevatedButton(
onPressed: () {
print('Button pressed');
},
child: const Text('Submit'),
)Gesture-related widgets allow an application to respond to user actions such as taps, long presses, and other interactions.
GestureDetector(
onTap: () {
print('Container tapped');
},
child: Container(
width: 150,
height: 100,
color: Colors.blue,
child: const Center(
child: Text('Tap Me'),
),
),
)State represents information that can change while an application is running.
int count = 0;When the value changes inside a StatefulWidget:
setState(() {
count++;
});When relevant state or configuration changes, Flutter can rebuild portions of the widget tree to update the UI. This is a central concept of Flutter's reactive UI model.
State Changes
↓
setState()
↓
build()
↓
Updated Widget Description
↓
Updated UIDevelopers should therefore write widgets in a way that makes rebuilding predictable and efficient.
Flutter code frequently uses const for widgets whose configuration can be known at compile time.
const Text(
'Hello Flutter',
)
Using const where appropriate can make widget construction more efficient and communicates that the
widget configuration is immutable.
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text('Home'),
),
);
}
}Constructors allow custom widgets to receive data, making them reusable.
class StudentCard extends StatelessWidget {
final String name;
final String course;
const StudentCard({
super.key,
required this.name,
required this.course,
});
@override
Widget build(BuildContext context) {
return Card(
child: ListTile(
title: Text(name),
subtitle: Text(course),
),
);
}
}Column(
children: [
const StudentCard(
name: 'Rahul',
course: 'Flutter',
),
const StudentCard(
name: 'Priya',
course: 'Dart',
),
],
)Constructor parameters are an important technique for creating reusable components.
As an application grows, repeating large UI structures makes code difficult to maintain. Creating custom widgets helps separate functionality and makes components reusable.
class AppTitle extends StatelessWidget {
final String title;
const AppTitle({
super.key,
required this.title,
});
@override
Widget build(BuildContext context) {
return Text(
title,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
);
}
}Now the widget can be reused:
AppTitle(title: 'Dashboard')
AppTitle(title: 'Profile')
AppTitle(title: 'Settings')Flutter includes Material and Cupertino widget systems. Material widgets are based on Google's Material Design system, while Cupertino widgets provide iOS-style controls and visual patterns.
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Material App'),
),
),
)import 'package:flutter/cupertino.dart';
void main() {
runApp(
const CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('iOS Style'),
),
child: Center(
child: Text('Hello'),
),
),
),
);
}Navigation allows users to move from one screen to another. Flutter commonly uses a Navigator-based approach for managing routes and screens.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondPage(),
),
);To return to the previous screen:
Navigator.pop(context);
Applications frequently need images, icons, fonts, JSON files, and other resources. Flutter assets can be declared
in the project's pubspec.yaml file.
flutter:
assets:
- assets/images/Then use the asset:
Image.asset(
'assets/images/logo.png',
)
The pubspec.yaml file is one of the most important configuration files in a Flutter project.
name: student_app
description: A Flutter student application.
dependencies:
flutter:
sdk: flutterFlutter applications can use packages from the Dart and Flutter ecosystem to add functionality.
For example:
flutter pub add httpAfter adding a package, it can be imported into Dart code according to the package's API.
import 'package:http/http.dart' as http;Hot reload is a major productivity feature in Flutter development. It allows supported changes to be applied to a running application without requiring a complete restart in many development scenarios.
Original:
const Text('Hello Flutter')Change to:
const Text('Welcome to Flutter')After hot reload, the updated UI can be displayed quickly while the application is running.
my_app/
│
├── android/
├── ios/
├── lib/
│ └── main.dart
├── test/
├── web/
├── windows/
├── macos/
├── linux/
├── pubspec.yaml
├── pubspec.lock
└── README.md
The lib directory usually contains the Dart source code for the application.
lib/
├── main.dart
├── screens/
├── widgets/
├── models/
├── services/
└── utils/As a project becomes larger, developers can organize source code into separate folders based on responsibility.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Fundamentals',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Fundamentals'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.flutter_dash,
size: 80,
),
const SizedBox(height: 20),
const Text(
'Welcome to Flutter',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Text(
'Learn widgets, layouts, state and interaction.',
textAlign: TextAlign.center,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
debugPrint('Learning started');
},
child: const Text('Start Learning'),
),
],
),
),
);
}
}MyApp
↓
MaterialApp
↓
HomePage
↓
Scaffold
├── AppBar
│ └── Text
│
└── Center
└── Column
├── Icon
├── SizedBox
├── Text
├── SizedBox
├── Text
├── SizedBox
└── ElevatedButton
└── TextInstall Flutter
↓
Create Project
↓
Open Project
↓
Write Dart Code
↓
Create Widgets
↓
Build Layout
↓
Run Application
↓
Test UI
↓
Hot Reload
↓
Debug
↓
Improve Application| Command | Purpose |
|---|---|
flutter doctor |
Checks the development environment. |
flutter create my_app |
Creates a Flutter project. |
flutter run |
Runs the application. |
flutter devices |
Lists available devices. |
flutter analyze |
Analyzes Dart and Flutter code. |
flutter test |
Runs tests. |
flutter pub get |
Downloads and resolves dependencies. |
flutter pub add package_name |
Adds a package dependency. |
flutter clean |
Cleans generated build files. |
Beginners often put the entire application into one file. This is acceptable for very small examples, but larger applications should be divided into reusable widgets and logically organized files.
A very large build() method can become difficult to understand and maintain.
Break complex interfaces into smaller custom widgets.
A StatefulWidget describes the widget configuration, while its associated State object stores mutable
state.
Understanding Flutter's constraint-based layout system is essential when working with rows, columns, lists, expanded widgets, and nested layouts.
The build() method may be called many times, so expensive or unrelated operations should not be placed
there unnecessarily.
Create a Flutter application called:
flutter_fundamentals_appYour application should contain:
MaterialApp
↓
Scaffold
↓
AppBar
↓
SingleChildScrollView
↓
Column
├── Icon
├── Text
├── Text
├── Container
│ └── Column
│ ├── Text
│ ├── Text
│ └── Text
└── ElevatedButtonimport 'package:flutter/material.dart';
void main() {
runApp(const LearningApp());
}
class LearningApp extends StatelessWidget {
const LearningApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Learning'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.flutter_dash,
size: 70,
),
const SizedBox(height: 20),
const Text(
'Learn Flutter',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Text(
'Start with Dart, widgets, layouts, '
'state and user interaction.',
textAlign: TextAlign.center,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
debugPrint('Course started');
},
child: const Text('Start Course'),
),
],
),
),
),
),
),
),
);
}
}main()runApp()StatelessWidgetMaterialAppScaffoldAppBarCenterPaddingCardColumnTextIconElevatedButton| Concept | Purpose |
|---|---|
| Dart | Programming language used by Flutter. |
| Flutter | Framework for building cross-platform user interfaces and applications. |
| Widget | Basic building block of the Flutter UI. |
| Widget Tree | Hierarchical arrangement of widgets. |
main() |
Entry point of a Dart program. |
runApp() |
Makes a widget the root of the application. |
build() |
Describes the UI returned by a widget. |
StatelessWidget |
Widget without internally managed mutable state. |
StatefulWidget |
Widget that works with mutable state through a State object. |
MaterialApp |
Application-level Material configuration. |
Scaffold |
Basic Material screen structure. |
Row |
Horizontal layout. |
Column |
Vertical layout. |
Stack |
Overlapping layout. |
Container |
Size, spacing, alignment, and decoration. |
setState() |
Notifies Flutter that state has changed in a StatefulWidget. |
| Hot Reload | Quickly applies many supported code changes during development. |
Flutter is a framework for building user interfaces and applications across supported platforms using Dart.
Flutter applications are primarily written in Dart.
A widget is a fundamental building block used to describe part of a Flutter application's user interface or structure.
The widget tree is the hierarchical structure formed by composing parent and child widgets.
StatelessWidget is used when the widget does not manage mutable state internally, while StatefulWidget is used when a widget needs to work with changing state.
It takes a widget and makes it the root widget of the Flutter application.
Scaffold provides a standard Material Design visual structure for a screen.
BuildContext represents the location of a widget within the widget tree and is commonly used to access inherited information and services associated with that location.
Custom widgets make code easier to organize, reuse, test, and maintain.
Hot reload allows many supported changes to be applied to a running Flutter application quickly during development.
main().runApp().build().BuildContext.setState().JustAcademy Flutter Training: https://www.justacademy.co/course-detail/flutter-training
Register for Course Demo: https://www.justacademy.co/register-for-course-demo
Flutter Official Documentation: https://docs.flutter.dev/
Flutter Widget Fundamentals: Widget Fundamentals
Flutter Widget Catalog: Flutter Widget Catalog
Flutter Fundamentals provide the foundation for everything that comes later in Flutter development. The most important concepts to understand are Dart, widgets, widget trees, StatelessWidget, StatefulWidget, build(), BuildContext, MaterialApp, Scaffold, layouts, state, user interaction, assets, and reusable components.
Once these concepts are clear, developers can gradually move toward more advanced Flutter topics such as screen navigation, forms and validation, API integration, asynchronous programming, state management, local storage, animations, responsive design, testing, app architecture, and deployment.
The key principle to remember is that Flutter applications are built by composing widgets. Small widgets can be combined into larger reusable components, and those components can be combined to create complete application screens and full-featured applications.
